import React, { useState } from "react";
import ReactDOM from "react-dom/client";
import "./assets/styles/index.css";

const categoriesList = [
  {
    id: 0,
    name: "推荐",
  },
  {
    id: 1,
    name: "一个人套餐",
  },
  {
    id: 2,
    name: "西北凉菜",
  },
  {
    id: 3,
    name: "博主推荐",
  },
  {
    id: 4,
    name: "主食",
  },
];

function App() {
  const [activeCategories, setActiveCategories] = useState(0);

  function handleCategories(id) {
    setActiveCategories(id);
  }

  return (
    <ul className="categories">
      {categoriesList.map((item) => (
        <li
          key={item.id}
          className={`categoriesList ${
            item.id === activeCategories ? "activeCategories" : ""
          }`}
          onClick={() => handleCategories(item.id)}
        >
          {item.id === 0 && (
            <img src={require("./assets/images/usericon.jpg")} alt="usericon" />
          )}
          {item.name}
        </li>
      ))}
    </ul>
  );
}
const root = ReactDOM.createRoot(document.getElementById("root"));

root.render(<App />);
